<template>
    <section class="section section-shaped section-lg my-0">
        <div class="shape shape-style-1 bg-gradient-default">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
        <div class="container pt-lg-md">
            <div class="row justify-content-center">
                <div class="col-lg-5">
                    <card type="secondary" shadow
                          header-classes="bg-white pb-5"
                          body-classes="px-lg-5 py-lg-5"
                          class="border-0">
                        <template>
                            <div class="text-muted text-center mb-3">
                                <small>您好</small>
                            </div>

                        </template>
                        <template>
                            <div class="text-center text-muted mb-4">
                                <small>请填入信息注册</small>
                            </div>
                            <form role="form">
                                <base-input alternative
                                            v-model="ruleForm.userEmail"
                                            class="mb-3"
                                            placeholder="电子邮箱/Email"
                                            type="email"
                                            addon-left-icon="ni ni-email-83">
                                </base-input>
                                <base-input alternative
                                            v-model="ruleForm.userName"
                                            class="mb-3"
                                            placeholder="昵称/Name"
                                            type="text"
                                            addon-left-icon="ni ni-single-02">
                                </base-input>
                                <base-input alternative
                                            v-model="ruleForm.userPasswd"
                                            class="mb-3"
                                            placeholder="密码/Password"
                                            type="password"
                                            addon-left-icon="ni ni-lock-circle-open">
                                </base-input>
                                <base-input alternative
                                            v-model="ruleForm.userPasswd2"
                                            type="password"
                                            placeholder="再次输入密码/RePassword"
                                            addon-left-icon="ni ni-lock-circle-open">
                                </base-input>
                                <div class="row justify-content-center">
                                    <base-radio name="用户" class="mb-3 mr-3" v-model="radio">
                                        用户
                                    </base-radio>
                                    <base-radio name="工人" class="mb-3 mr-3" v-model="radio">
                                        工人
                                    </base-radio>
                                    <base-radio name="客服" class="mb-3" v-model="radio">
                                        客服
                                    </base-radio>
                                </div>
                                <div v-if="ruleForm.userPasswd" class="text-muted font-italic">
                                    <small>密码强度:
                                        <span class="font-weight-700" v-bind:class="[(mode===1)?'text-danger':'',
                                                                                     (mode===2)?'text-warning':'',
                                                                                     (mode===3)?'text-info':'',
                                                                                     (mode===4)?'text-success':'']">{{passwdStrongText}}</span>
                                    </small>
                                </div>
                                <base-checkbox v-model="agreement">
                                    <span>我同意
                                        <a type="default" size="sm" v-b-modal.modal-1>隐私条约</a>
                                        <b-modal id="modal-1" title="隐私条约" >
                                            1.COLLECTION OF INFORMATION
                                            The data we collect depends on the context of your interactions with us, the choices you make, including your privacy settings, and the products and features you use. The data we collect can include SDK/API/JS code version, browser, Internet service provider, IP address, platform, timestamp, application identifier, application version, application distribution channel, independent deice identifier, iOS ad identifier (IDFA), Android ad master identifier, network card (MAC) address, and international mobile device identification code (IMEI) The equipment model, the terminal manufacturer, the terminal device operating system version, the session start / stop time, the location of the language, the time zone and the network state (WiFi and so on), the hard disk, the CPU, and the battery use, etc.
                                            2.USE OF PERSONAL DATA
                                            Product Improvement. We use data to continually improve our products, including adding new features or capabilities. For example, … .
                                            3.SHARING OF PERSONAL DATA
                                            To improve our product and provide you better service, we also share personal data with vendors or agents working on our behalf for the purposes described in this privacy policy. For example, companies we've hired to provide data analytical services may need collect and access to personal data to provide those functions. In such cases, these companies must abide by our data privacy and security requirements.
                                        </b-modal>
                                    </span>
                                </base-checkbox>
                                <div class="text-center">
                                    <base-button @click="register" type="primary" class="my-4">{{registText}}</base-button>
                                </div>
                            </form>
                        </template>
                        <base-alert v-if="showDangerMsg" type="danger">
                            {{dangerMsg}}
                        </base-alert>
                        <base-alert v-if="showSuccessMsg" type="success">
                            恭喜您，注册成功！赶紧登录体验吧
                        </base-alert>
                    </card>
                </div>
            </div>
        </div>
    </section>
</template>
<script>
import {workerRegister} from '../api/index.js'
export default {
    data() {
        return {
            ruleForm: {
                userEmail: '',
                userName: '',
                userPasswd: '',
                userPasswd2: ''
            },
            registText: '创建账户',
            showDangerMsg: false,
            dangerMsg: '',
            showSuccessMsg: false,
            agreement: false,
            mode: 1,
            passwdStrongText: '',
            radio: '',
            role: ''
        }
    },
    computed: {
        userPasswd() {
            return this.ruleForm.userPasswd;
        }
    },
    methods: {
        messageSuccess () {
            this.showSuccessMsg = true;
        },
        message(msg) {
            this.showDangerMsg = true;
            this.dangerMsg = msg;
        },
        checkStrong(password) {
            var modes = 0;
            if (password.length < 1) return modes;
            if (/\d/.test(password)) modes++; //数字
            if (/[a-z]/.test(password)) modes++; //小写
            if (/[A-Z]/.test(password)) modes++; //大写
            if (/\W/.test(password)) modes++; //特殊字符

            //逻辑处理
            switch (modes) {
                case 1:
                    this.mode = 1;
                    return "弱";
                case 2:
                    this.mode = 2;
                    return "可";
                case 3:
                case 4:
                    if (password.length < 12)
                    {
                        this.mode = 3;
                        return "良";
                    } else {
                        this.mode = 4;
                        return "优";
                    }
            }
            return "……";
        },
        register() {
            this.showDangerMsg = false;
            this.registText = '创建中...';
            let userEmail = this.ruleForm.userEmail;
            let userName = this.ruleForm.userName;
            let userPwd = this.ruleForm.userPasswd;
            let userPwd2 = this.ruleForm.userPasswd2;
            let role = this.radio;
            if (!userEmail || !userName || !userPwd || !userPwd2) {
                this.message('登录邮箱/昵称/密码不能为空!');
                this.registText = '创建账户';
                return false
            }
            if (userPwd2 !== userPwd) {
                this.message('两次输入的密码不相同!');
                this.registText = '创建账户';
                return false
            }
            if (!this.agreement) {
                this.message('您未勾选同意我们的相关注册协议!');
                this.registText = '创建账户';
                return false
            }
            console.log(role);
            if(role === '用户'){
                this.role = 'user';
            }
            if(role === '工人'){
                this.role = 'worker';
            }
            if(role === '客服'){
                this.role = 'admin';
            }
            workerRegister({
                email: this.ruleForm.userEmail,
                name: this.ruleForm.userName,
                psw: this.ruleForm.userPasswd,
                role: this.role})
                .then(res => {
                if (res.code === "1") {
                    this.messageSuccess();
                    this.$router.push({
                        path: '/login'
                    })
                } else {
                    this.message(res.msg);
                    this.registText = '创建账户';
                    return false
                }
            })
            .catch(error => {
                this.message(error);
                this.registText = '创建账户';
                return false
            })
        }
    },
    watch: {
        userPasswd(newValue) {
            this.passwdStrongText = this.checkStrong(newValue);
        }
    }
};
</script>
<style>
</style>
